<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<script src="../booklet/jquery-1.7.2.min.js" type="text/javascript"></script>
		<script src="../booklet/jquery-ui-1.8.21.custom.min.js" type="text/javascript">
		</script>
		<script src="../booklet/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="../booklet/jquery.booklet.1.4.0.min.js" type="text/javascript"></script>
        <link href="../booklet/jquery.booklet.1.4.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
		<title>TestBooklet</title>
	</head>
	<body>
		<script>
			$(function() {
				//single book
				$('#mybook').booklet({
					width:400,
					height:300,
					speed:400,
					//startingPage:1
					direction:'LTR',
					shadows:false,
					closed:true,
					autoCenter:true,
					covers:true,
					manual:true,
					hash:true,
					keyboard:true,
					auto:true,
					delay:200000
					//menu: '#custom-menu,
					//pageSelector: true,
					//chapterSelector: true
					
				});
				
				// event type binding
				$("#mybook").bind("bookletadd", function(event, data) {
					//alert('page added! page html: '+ data.page.outerHTML);
				});
				
				$('#custom-add-end').click(function(e){
					e.preventDefault();
					$('#mybook').booklet("add", "end", "<div><h3>I'm a new page!</h3></div>");
				});
   
				//multiple books with ID's
				//$('#mybook1, #mybook2').booklet();
				
				//multiple books with a class
				//$('.mycustombooks').booklet();
			});
		</script>
		<div id="custom-add-end" >
			add a new page!
		</div>
		<div id="mybook">
			<div> 
				<h3>Yay, Page 1!</h3>
			</div>
			<div> 
				<h3>Yay, Page 2!</h3>
			</div>
			<div> 
				<h3>Yay, Page 3!</h3>
			</div>
			<div> 
				<h3>Yay, Page 4!</h3>
			</div>
			<div> 
				<h3>Yay, Page 5!</h3>
			</div>
			<div> 
				<h3>Yay, Page 6!</h3>
			</div>
			<div> 
				<h3>Yay, Page 7!</h3>
			</div>
			<div> 
				<h3>Yay, Page 8!</h3>
			</div>
		</div>
	</body>
</html>